<template>
  <div class='editBox'>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="banner">
      <!-- <div class="pic">
        <img src="@/assets/image/1.jpg" alt />
      </div> -->
      <div class="companyDetail">
        <div class="box">
          <span class="a">公司名称：</span>
          <span>{{infoData.name}}</span>
        </div>
        <div class="box">
          <span class="a">公司简称：</span>
          <span v-html='infoData.shortName'></span>
        </div>
        <div class="box">
          <span class="a">监督单位：</span>
          <span>
            <el-input v-model="infoData.monitorUnit" placeholder="请输入监督单位数量" ></el-input>
          </span>
        </div>
        <div class="box">
          <span class="a">公司logo：</span>
            <el-upload
              :class="{hid:updateBtn}"
              list-type="picture-card"
              action 
              :auto-upload="false"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="fileData">
              <i class="el-icon-plus"></i>
            </el-upload>
        </div>
        <div class="box1">
          <div class="a">公司简介：</div>
          <div class="text"> 
            <quill-editor v-model="infoData.shortName" />
          </div>
        </div>
        <div class="map">
          <div class="a">位置标注：</div>
          <div class="mapOne">
            <baidu-map class="bm-view" :center="form" :zoom="15" :scroll-wheel-zoom="true" @click="getPoint">
              <bm-marker :position="form" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
            </baidu-map>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button class="button" @click='cancel'>取消</el-button>
      <el-button type="primary" class="button" @click='preservation'>保存</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="imgUrl">
    </el-dialog>
  </div>
</template>
<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  components: {
    Breadcrumb,
    BaiduMap,
  },
  data() {
    return {
      // 百度地图
      form:{lng: 0, lat: 0},
      infoData:{},
      //面包靴跳转数据
      Breadcrumb: [
        {
          name: "廉政档案",
          link: "IncorruptibleArchives",
        },
        {
          name: "公司档案",
          link: "archives",
        },
        {
          name: "公司档案详情",
          link: "Detail",
        },
        {
          name: "基本信息修改",
          link: "EditDetail",
        },
      ],
      updateBtn:false,
      dialogVisible:false,
      fileData:[],
      imgUrl:''
    };
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    handleRemove(file) {
      this.fileData = []
      if (file.status === 'success') {
        this.$message.success('删除成功')
        this.updateBtn = false
      }
    },
    handleChange(file) {
      console.log(file);
      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
      const extension =
          testmsg === 'jpg' ||
          testmsg === 'png' ||
          testmsg === 'jpeg'
      if (!extension) {
          this.$message.error('上传文件格式不正确')
      }else{
        this.updateBtn = true
        const formData = new FormData()
        formData.append("multipartFile", file.raw)
        this.Api.uploadFile(formData).then((res) => {
          this.fileData.push({
            name: res.data.fileName,
            url: this.$store.state.PortalManagement.fileIp + res.data.url
          })
        });
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.imgUrl = file.url
      this.dialogVisible = true
    },
    getInfo(){
      let paramsJson = {
        id:this.$route.query.id
      }
      this.Api.compeletedetail(paramsJson).then((res) => {
        if (res.code == 0) {
          this.infoData = res.data
          this.fileData= (res.data.logoUrl === '' ? [] : [{url:res.data.logoUrl}])
          this.form.lng = res.data.longitude
          this.form.lat = res.data.latitude
        }
      })
    },
    getPoint(e) {
        // console.log(e)
        this.form.lng = e.point.lng
        this.form.lat = e.point.lat
        /* global BMap */ 
        // eslint-disable-next-line no-unused-vars
        const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
        // geocoder.getLocation(e.point, rs => {
        //     // console.log(rs.addressComponents) // 结构化的地址描述(object)
        //     const province = rs.addressComponents.province // 省
        //     const city = rs.addressComponents.city // 城市
        //     const district = rs.addressComponents.district // 区县
        //     const street = rs.addressComponents.street // 街道
        //     const streetNumber = rs.addressComponents.streetNumber// 门牌号
        //     this.form.address = province + city + district + street + streetNumber // 组装成地址
        // console.log(rs.surroundingPois) // 附近的POI点(array) POI：兴趣点 可以是一栋房子、一个商铺、一个邮筒、一个公交站
        // console.log(rs.business) // 商圈字段，代表此点所属的商圈(string)
        // })
    },
    cancel(){
      this.$router.go(-1)
    },
    preservation(){
      let paramsJson = {
        id:this.$route.query.id,
        monitorUnit:this.infoData.monitorUnit,
        logoUrl:this.fileData[0].url,
        introduction:this.infoData.shortName,
        longitude:this.form.lng,
        latitude:this.form.lat
      }
      this.Api.compeletInfoEdit(paramsJson).then((res) => {
        if (res.code == 0) {
          this.$message.success('修改成功')
          this.$router.go(-1)
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.editBox{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.banner {
  width: 100%;
  height: calc(100% - 132px);
  padding: 20px;
  padding-bottom: 200px;
  background-color: #fff;
  overflow: auto;
}
.pic {
  width: 100px;
  height: 100px;
}
.pic img {
  width: 100px;
  height: 100px;
}
.companyName h3 {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 20px 0;
}
.box1 {
  margin-top: 20px;
  display: flex;
}
.text {
  width: 1418px;
  height: 100px;
}
.a {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
}
.map {
  margin-top: 285px;
  display: flex;
}
.mapOne {
  width: 600px;
  height: 338px;
  border: 1px solid red;
}
.amap-demo {
  height: 300px;
}
.bm-view {
  width: 100%;
  height: 338px;
}
/deep/.el-input__inner {
    
    height: 36px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width:320px;
}
.box{
  margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
}
/deep/.ql-container {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    width: 1350px;
    height: 320px;
    margin: 0px;
    position: relative;
}
/deep/.ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 8px;
    width: 1350px;
}
/deep/ .hid .el-upload {
  display: none;
}
.footer{
  margin-top: 20px;
  width: 100%;
  height: 56px;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>